<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 14:48:06
 * @Description: 
-->
<template>
  <tm-app>
  <tm-tabs 
    @change="tabschange" 
    :list="tabList" 
    :item-width="150" 
    :width="750" 
    itemModel="line"
   :default-name="tabActive"
   ></tm-tabs>
  <component :is="activeCom" />
  <m-tabbar :active="1"/>
</tm-app>
</template>
<script setup>
  import {ref, shallowRef, markRaw, reactive} from 'vue'
  import mTabbar from '@/components/Tabbar'
  import Goods from './components/Goods.vue'
  import Delivery from './components/Delivery.vue'
  import Address from './components/Address.vue'
  import Fee from './components/Fee.vue'
  import Print from './components/Print.vue'

  const tabActive = ref(0)
  let activeCom = shallowRef(Goods)
  let tabList = reactive([
    { key: 0, title: '商品管理', com:markRaw(Goods) },
    { key: 1, title: '配送管理', com:markRaw(Delivery) },
    { key: 2, title: '发货地址', com:markRaw(Address) },
    { key: 3, title: '运费模版', com:markRaw(Fee) },
    { key: 4, title: '打印设置', com:markRaw(Print) },
  ])
  const tabschange = (index)=>{
    activeCom.value = tabList[index].com
  }
</script>
<style lang="scss" scoped>
// :deep(.animateAll_tabs_tmui){width: 50px !important; height: 2px !important;}
</style>
<style>
page{background-color: #f8f8f9;}
</style>